<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Hello World</title>
</head>
<body>

<!--定义消息显示区域-->
<!--定义 vue 的信息定位区域-->
<!--我们为这个div定义来id属性，值为app。目的是方便js脚本定位它，并将它抽象成一个对象。-->
<div id="app">
    <!--其中{{ message }} 语法vue的模板语言语法，表示输出变量 message 的内容-->
    <p>{{message}}</p>
</div>

<!--引入 vue 的 js 文件-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script type="text/javascript">
    // new Vue表示建立一个dom所对应的抽象对象。
    new Vue({
        // el属性定义了使用什么selector来获取到这个对象对应的dom，
        // 因为我们要对应的dom对象id为app，所以此处使用 #app 作为 selector
        el: '#app',
        data: {
            message: "Hello Vue.js"
        }
    })
    // 一旦vue将某个dom对象抽象为了一个js对象后，就会对其进行渲染，
    // 我们之前写的 {{ message }} 就会被渲染为真正你想在页面上显示的文本。
    // data属性定义了渲染这个dom对象是需要赋值的属性集合。我们定义message属性的值为"Hello Vue.js!"
</script>
</body>
</html>